<template>
  <el-dialog v-model="isShow" @opened="handleDialogOpened" @closed="handleDialogClosed" title="重命名节点">
    <el-input v-model="renameInputModel" placeholder="请输入新的节点名称" :maxlength="maxLength" show-word-limit :disabled="isDisabled"></el-input>

    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {Cell} from "@antv/x6";
import {ComputedRef, WritableComputedRef} from "vue";

const props = defineProps<{
  show: boolean
  currentNode: Cell
}>()
const emits = defineEmits(['update:show'])
const isShow: WritableComputedRef<boolean> = computed<boolean>({
  get() {
    return props.show
  },
  set(newValue) {
    emits('update:show', newValue)
  }
})
const renameInputModel = ref('')

const isDisabled: ComputedRef<boolean> = computed(() => {
  const shape = props.currentNode.shape
  if (shape === 'end') {
    return true
  }
  return false
})

const maxLength: ComputedRef<number> = computed(() => {
  const shape = props.currentNode.shape
  if (shape === 'start') {
    return 50
  }
  return 15
})

const confirm = () => {
  props.currentNode.setData({
    dialogData: {
      name: renameInputModel.value
    }
  })
  isShow.value = false
}

const cancel = () => {
  isShow.value = false
}

const handleDialogOpened = () => {
  const nodeData = props.currentNode.getData()
  renameInputModel.value = nodeData?.dialogData?.name ?? ''
}

const handleDialogClosed = () => {
  renameInputModel.value = ''
}

</script>

<style scoped lang="scss">

</style>
